<template>
  <ConfigProvider :locale="locale">
    <div class="mars-main-view" id="mars-main-view">
      <div id="centerDiv" class="centerDiv-container">
        <mars-map :url="configUrl" :options="mapOptions" @onload="marsOnload" />
      </div>
    </div>
  </ConfigProvider>
</template>

<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { computed, provide, ref } from "vue";
import { ConfigProvider } from "ant-design-vue";
//   import { useWidgetStore } from "@/common/store/widget"
import MarsMap from "@/components/map/main-view/map.vue";
//   import MarsWidget from "./widget.vue"

const locale = zhCN;

//   const widgetStore = useWidgetStore()

//   const widgets = computed(() => widgetStore.state.widgets)
//   const openAtStart = computed(() => widgetStore.state.openAtStart)

const props = withDefaults(
  defineProps<{
    mapOptions?: any;
    url?: string;
  }>(),
  {
    mapOptions: () => ({}),
    url: "",
  }
);
const configUrl =
  props.url === "" || !props.url
    ? `${"/"}config/config.json?time=${new Date().getTime()}`
    : props.url;

let mapInstance: any = null;
provide("getMapInstance", () => {
  return mapInstance;
});

const emit = defineEmits(["mapLoaded"]);

const loaded = ref(false);
const marsOnload = (map: any) => {
  // console.log("map构造完成", map);
  mapInstance = map;
  emit("mapLoaded", mapInstance);
  loaded.value = true;
};
</script>

<style lang="less" scoped>
.mars-main-view {
  top: -2px;
  right: 2px;
  height: calc(100vh + 2px);
  width: 100vw;
  position: absolute;
  z-index: 1;
}
.centerDiv-container {
  background-color: var(--mars-base-bg) !important;
  color: var(--mars-text-color) !important;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>
